<template>
    <div class="card card-custom gutter-b example example-compact" id="tableUserRoleListBody">
        <div class="card-header">
        <div class="card-title">
            <span class="card-icon">              
            <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
            </span>
            <h3 class="card-label"> 查询区域 </h3>
        </div>
        <div class="card-toolbar">
            <div class="example-tools justify-content-center">
            <!-- <span data-toggle="tooltip" class="example-toggle"></span>
            <span data-toggle="tooltip" class="example-copy"></span> -->
            </div>
        </div>
        </div>
        <div class="card-body">
            <!--查询条件-->
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
              <div class="m-portlet__body">	
                <div class="form-group m-form__group row">
                    <label class="col-form-label">姓名</label>
                    <div class="col-lg-1">
                        <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
                    </div>
                    <label class="col-form-label">账号</label>
                    <div class="col-lg-1">
                        <input type="text" class="form-control" v-model="searchForm.account" placeholder="请输入">
                    </div>
                    <label class="col-form-label">状态</label>
                    <div class="col-lg-2">
                        <select class="form-control" v-model="searchForm.status">
                            <option value="">---请选择---</option>
                            <option value="0">正常</option>
                            <option value="1">冻结</option>
                            <option value="2">禁用</option>
                        </select>
                    </div>
                    
                    <label class="col-form-label">类型</label>
                    <div class="col-lg-2">
                      <input type="hidden" class="form-control" name="searchForm.account_type_id" placeholder="请输入">
                      <el-select v-model="searchForm.accountTypeIdTemp" multiple placeholder="请选择">
                          <el-option
                          v-for="item in typeList"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                          </el-option>
                      </el-select>
                    </div>
                    <label class="col-form-label">类型条件</label>
                    <div class="col-lg-1">
                        <select class="form-control" v-model="searchForm.typeCondition">
                            <option value="">请选择</option>
                            <option value="0">并且</option>
                            <option value="1">或</option>
                        </select>
                    </div>
                </div>
              </div>  
              <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions--solid">
                        <div class="row">
                            <div class="col m--align-left">
                              <div class="form-group m-form__group row">                  
                                <label class="col-form-label">邮箱</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control" v-model="searchForm.email" placeholder="请输入">
                                </div>
                                <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2" @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                                <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2"  @click="resetAll()"> <span><span>清空条件</span></span></b-button>
                            </div>
                            </div>
                            <div class="col m--align-right">
                              <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2"
                                    @click="addXtUr" :disabled="this.sels.length === 0">
                                    <span><i class="fas fa-user-plus"></i><span>导 入</span></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>       
            </div>
        </div>
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row :data="roleUserRoleStayList" >
          <!-- 复选框 -->
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column label="序号" min-width="50">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
          </el-table-column>
          <el-table-column align="center" prop="account" label="账号" min-width="100"></el-table-column>
          <el-table-column align="center" prop="name" label="姓名" min-width="100"></el-table-column>
          <el-table-column align="center" :formatter="formatterTypes" show-overflow-tooltip prop="oauthAccountTypes"  label="类型" min-width="200">
            
          </el-table-column>
          <el-table-column align="center" prop="status"  label="状态" min-width="110">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">
                <span class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">正常</span>
              </div>
              <div v-else-if="scope.row.status == 1">
                <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">冻结</span>
              </div>
              <div v-else-if="scope.row.status == 2">
                <span class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">禁用</span>
              </div>
              <div v-else>
                <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="email"  label="邮箱" min-width="200"></el-table-column>
          <el-table-column align="center" prop="createTime"  label="注册时间" min-width="160"></el-table-column>
          <el-table-column align="center" prop="updateTime"  label="修改时间" min-width="160"></el-table-column>
          <el-table-column align="center" prop="lastLoginTime"  label="上次登录时间" min-width="160"></el-table-column>   
        </el-table>
        <div class="block">
        <el-pagination
            hide-on-single-page   
            @size-change="handleSizeChange"        
            @current-change="handleCurrentChange"  
            :current-page="pageNo"                
            :page-sizes="[5, 10, 30, 50]"          
            :page-size="pageSize"			  
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="totalCount">		
        </el-pagination>
        </div>
    </div>
</template>  
<script>
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        searchForm:{"flag":"2",accountTypeIdTemp:"",accountTypeId: "",name:"",account:"",typeCondition:"",status:"",email:"",roleId:""},
        roleUserRoleStayForm:{role_id:"",},        
        roleUserRoleStayList:[],
        typeList:[],
        sels: [], //当前选框选中的值
        pageNo:1,      // 默认当前是第一页
        pageSize:5,    // 当前每页的数据是5条
        totalCount:0   // 总数默认为0
      }
    },
    components: {
    },
    props: {
      roleData:[]
    },
    watch:{
      "searchForm.accountTypeIdTemp":{//监听字段变化
            handler:function(newVal,old){
                if(newVal){
                    this.searchForm.accountTypeId = newVal.join(",");
                }
            }
        },
    },
    mounted() {
        this.initList();
        this.initTypeList();
    },
    methods:{
      initList(){
        this.searchForm.roleId = this.roleData.id;
        showWating({renderBody:"tableUserRoleListBody"});
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        params.searchJson = JSON.stringify(this.searchForm);//为form元素     
        apiUtil.queryPage(process.env.VUE_APP_OAUTH_API+"/oauthRole/account/list", params).then(({ data }) => {
          this.roleUserRoleStayList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },      
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
      },
      formatterTypes(row, column){
        let oauthAccountTypes  = row.oauthAccountTypes;
        let accountTypeText = null;
        if(null != oauthAccountTypes){
            for(var i =0; i < oauthAccountTypes.length;i++){
                if(null == accountTypeText){
                  accountTypeText = oauthAccountTypes[i].name;
                }else{
                  accountTypeText = accountTypeText+","+oauthAccountTypes[i].name;
                }
            }
        }
        return accountTypeText;
      },
      addXtUr(){ // 导入账户
        if(this.sels.length === 0){
          handleAlert("请选择要导入的账户", "warning", 3)
          return;
        }
        // 导入前提示
        this.$confirm("确认导入选择的账户吗?", "提示", {type: "warning",}).then(() => {
          let id = this.sels.map((item) => item.id);
          // 根据后台想要的参数格式选择
          let ids = id.join(",");
          let params = {accountId:ids,roleId:this.roleData.id};
          apiUtil.post(process.env.VUE_APP_OAUTH_API+"/oauthRole/addOauthAR",params).then(data=>{
            if(data.data.success){
              handleAlert("导入账户成功", "success", 3);
              this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式，目标刷新主列表使用
              this.search();
            }else {
              handleAlert("导入账户失败", "error", 3);
            }
          });
        }).catch(()=>{});//注意这里，这里是重点！！！;        
      },
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      search(){
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll(){
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },
      initTypeList(){
        let params = {};
        apiUtil.query(process.env.VUE_APP_OAUTH_API+"/oauthAccountType/listAll", params).then(({ data }) => {
            this.typeList = data.data;
        });
      },  
    }
  };
</script>